<template>
	<view class="">
		<view class="c_list">
			<view class="">
				处理方式
			</view>
			<picker @change="bindPickerChange" :value="index1" :range="list1" :disabled="disabledbol">
				<view class="uni-input">{{list1[index1]}}</view>
			</picker>
		</view>
		<view class="c_list">
			<view class="">
				退款原因
			</view>
			<picker @change="bindPickerChange2" :value="index2" :range="list2">
				<view class="uni-input">{{list2[index2]}}</view>
			</picker>
		</view>
		<view class="c_list">
			<view class="c_listtitle">
				退款说明
			</view>
			<input type="text" v-model="text" placeholder="选填" />
		</view>
		<view class="c_list">
			<view class="c_listtitle">
				退款金额
			</view>
			<input type="number" v-model="applyprice" placeholder="" />
		</view>
		<view class="c_list">
			<view class="c_listtitle">
				上传凭证
			</view>
			<view class="" style="display: flex;align-items: center;">
				<image v-for="item in imgs" :src="item" mode="" class="c_imgs"></image>
				<button type="default" size="mini" @tap="addimg">选择</button>
			</view>
		</view>
		<view class="c_list">
			<view class="c_lisinfo">
				提示:您可退款的最大金额为{{info.showprice}}元
			</view>
		</view>
		<button type="warn" class="c_btn" @tap="submit">{{info.order.refundstate=='0'?'申请售后':'修改售后'}}</button>
		<button type="warn" v-if="info.order.refundstate!='0'" style="background-color: #ccc;color: #333333;"
			class="c_btn" @tap="canceltap()">取消售后</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					'退款（仅退款不退货）',
					'退货退款',
					'换货'
				],
				index1: 0,
				list2: [
					'不想要了',
					'卖家缺货',
					'拍错了/订单信息错误',
					'其他'
				],
				index2: 0,
				imgs: [],
				id: "",
				refund: "",
				text: "",
				applyprice: "",
				info: {
					order: {}
				},
				img: '',
				disabledbol: false
			}
		},
		onLoad(option) {
			var that = this;
			that.id = option.id
			that.$axios('op/refund', "POST", 'order', {
				orderid: option.id
			}).then(res => {
				if (res.data.code == 200) {
					that.info = res.data.data;
					that.applyprice = res.data.data.showprice;
					if (that.info.order.statu == '1') {
						that.disabledbol = true;
					}
				}
			}, (error) => {

			})
		},
		methods: {
			canceltap() {
				var that = this;
				that.$axios('op/submitRefund', "POST", 'order', {
					orderid: that.id,
					cancel: 1
				}).then(res => {
					if (res.data.code == 200) {
						uni.showModal({
							title: '取消成功！',
							showCancel: false,
							success() {
								that.$navBack();
							}
						})
					}
				})
			},
			bindPickerChange: function(e) {
				this.index1 = e.target.value
			},
			bindPickerChange2: function(e) {
				this.index2 = e.target.value
			},
			addimg: function() {
				var that = this;
				var token = ""
				const value = uni.getStorageSync('token');
				if (value) {
					token = value
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.uploadFile({
							url: 'http://api.test.jiujiubaopin.com/order.php/util/upload',
							filePath: res.tempFilePaths[0],
							name: 'a',
							header: {
								token: token
							},
							formData: {
								'file': 'a'
							},
							success: (uploadFileRes) => {
								that.imgs.push(JSON.parse(uploadFileRes.data).data.url);
								console.log(that.imgs)
							}
						});
					}
				});
			},
			submit: function() {
				var that = this;
				that.$axios('op/submitRefund', "POST", 'order', {
					orderid: that.info.order.id,
					cancel: 0,
					rtype: that.index1,
					price: that.applyprice,
					content: that.text,
					reason: that.list2[that.index2],
					images: that.imgs[0]
				}).then(res => {
					if (res.data.code == 200) {
						uni.showModal({
							title: '申请成功',
							showCancel: false,
							success() {
								that.$navBack();
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.c_list {
		display: flex;
		align-items: center;
		padding: 20upx;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;

		picker {
			flex: 1;
			margin-left: 20upx;
		}
	}

	.c_listtitle {
		margin-right: 20upx;
	}

	.c_lisinfo {
		color: red;
	}

	.c_btn {
		margin-top: 40upx;
	}

	.c_imgs {
		width: 50upx;
		height: 50upx;
	}
</style>
